<template>
  <div class="product-container">
    <!-- 搜索区域 -->
    <div class="search-section">
      <el-form :inline="true" :model="param">

        <el-form-item label="逝者名称">
          <el-input v-model="param.deceasedName" placeholder="请输入逝者名称"></el-input>
        </el-form-item>
        <el-form-item label="订单编号">
          <el-input v-model="param.orderNo" placeholder="请输入订单编号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <div class="table-section">
      <el-table
          :data="tableData"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
      >
<!--        <el-table-column-->
<!--            type="selection"-->
<!--            width="55">-->
<!--        </el-table-column>-->
        <el-table-column
            prop="orderNo"
            label="编号"
            align="center"
        ></el-table-column>
        <el-table-column
            prop="deceasedName"
            label="逝者姓名"
            align="center"
        ></el-table-column>
        <el-table-column
            prop="familyContact"
            label="家属姓名"
            align="center"
        ></el-table-column>
        <el-table-column
            prop="familyPhone"
            label="家属联系方式"
            align="center"
        ></el-table-column>
        <el-table-column
            prop="serviceDate"
            label="服务日期"
            align="center"
        ></el-table-column>
        <el-table-column
            prop="orderAmount"
            label="订单总金额"
            align="right"
            :formatter="formatAmount"
        ></el-table-column>
        <el-table-column
            prop="orderDiscount"
            label="折扣"
            align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.orderDiscount === '0.9'">9折</span>
            <span v-if="scope.row.orderDiscount === '0.8'">8折</span>
            <span v-if="scope.row.orderDiscount === '0.7'">7折</span>
            <span v-if="scope.row.orderDiscount === '0.6'">6折</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="orderRealAmount"
            label="折后价格"
            align="right"
            :formatter="formatAmount"
        ></el-table-column>
        <el-table-column
            prop="orderStatus"
            label="订单状态"
            align="center"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.orderStatus === 1" type='success'>
              待确认
            </el-tag>
            <el-tag v-if="scope.row.orderStatus === 2" type='success'>
              已确认
            </el-tag>
<!--            <el-tag v-if="scope.row.orderStatus === 3" type='success'>-->
<!--              待确认-->
<!--            </el-tag>-->
<!--            <el-tag v-if="scope.row.orderStatus === 2" type='success'>-->
<!--              已确认-->
<!--            </el-tag>-->
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            align="center"
        >
          <template slot-scope="scope">
            <el-button
                size="medium"
                @click="handleViewDetail(scope.row.orderNo)"
                type="primary"
            >详情</el-button>
            <el-button
                size="medium"
                @click="handleEdit(scope.row)"
                v-if="scope.row.orderStatus === 1"
            >编辑</el-button>
<!--            <el-button-->
<!--                size="mini"-->
<!--                type="danger"-->
<!--                @click="handleDelete(scope.row)"-->
<!--            >删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页区域 -->
    <div class="pagination-section">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
      ></el-pagination>
    </div>

    <!-- 新增/编辑弹窗 -->
    <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        width="550px"
        append-to-body
    >
      <el-form
          :model="formData"
          ref="orderForm"
          label-width="100px"
          size="small">
        <el-form-item label="订单编号">
          <el-input v-model="formData.orderNo" style="width: 100%" disabled />
        </el-form-item>
        <el-form-item label="逝者姓名">
          <el-input v-model="formData.deceasedName" style="width: 100%" disabled />
        </el-form-item>
        <el-form-item label="家属">
          <el-input v-model="formData.familyContact" style="width: 100%" disabled />
        </el-form-item>
        <el-form-item label="订单总金额">
          <el-input v-model="formData.orderAmount" style="width: 100%" disabled />
        </el-form-item>
        <el-form-item label="折扣">
          <el-select v-model="formData.orderDiscount" @change="onChangeDiscount">
            <el-option
                v-for="(v, i) in discountData"
                :label="v.label"
                :value="v.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单总金额">
          <el-input v-model="formData.orderRealAmount" style="width: 100%" disabled />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 订单详情弹窗 -->
    <order-detail
        v-if="detailVisible"
        :orderDetail="orderDetail"
        @onClose="onClose"
    ></order-detail>
  </div>
</template>

<script src="./orderManager.js">
</script>

<style lang="scss" scoped src="./orderManager.scss" />